<template>
	<div class="editorStuContainer" v-if="student!=null">
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :close-on-click-modal="modalclose"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title">学员资料</div>
			  <div class="studentInfobox">
			  	<div class="dialog">
				  	<div class="studentinfo" >
				  		<el-row>
					  		<el-col :span="12">		
					  			<div class="inputbox">
					  				<span class="spanlabel">姓名：</span>
					  				<span class="spanlabelweight">{{student.realName}}</span>
					  				<!--<el-input style="width:40%;" v-model="student.realName" disabled  ></el-input>-->
					  			    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					  			    <span class="spanlabel">性别：</span>
					  			    <span class="spanlabelweight" v-if="student.genderMode==1">男</span>
					  			    <span class="spanlabelweight" v-else-if="student.genderMode==2">女</span>
					  			    <!--<el-radio v-model="student.genderMode" label="1" disabled>男</el-radio>
	  								<el-radio v-model="student.genderMode" label="2" disabled>女</el-radio>-->
					  			</div>
					  			<div class="inputbox">
					  				<span class="spanlabel">学号：</span>
					  				<span class="spanlabelweight">{{student.studentNo}}</span>
					  				<!--<el-input style="width:40%;" disabled v-model="student.studentNo" ></el-input>-->
					  			</div>
					  			<div class="inputbox">
					  				<span class="spanlabel">年级：</span>
					  				<span class="spanlabelweight">{{Name}}</span>
					  				<!--<el-select  v-model="student.grade" disabled placeholder="请选择">
									    <el-option								    	
									      v-for="item in gradeList"
									      :key="item.value"
									      :label="item.name"
									      :value="item.value">
									    </el-option>
								   </el-select>				  			-->
					  			</div>
					  			<div class="inputbox">
					  				<span class="spanlabel">学校/幼儿园：</span>
					  				<span class="spanlabelweight">{{student.kindergarten}}</span>
					  				<!--<el-input style="width:40%;" disabled v-model="student.kindergarten" ></el-input>-->
					  			</div>
					  			<div class="inputbox">
					  				<span class="spanlabel">出生年月：</span>
					  				<span class="spanlabelweight">{{student.birthday}}</span>
								    <!--<el-date-picker	 
								      disabled
								      v-model="student.birthday"
								      type="month"
								      value-format="yyyy-MM"
								      placeholder="选择日期">
	    						</el-date-picker>-->
					  			</div>
					  		</el-col>
					  		<el-col :span="12">
					  			<div class="stuheadimgbox">
					  				<div class="headimg">
					  					<img :src="student.photo" />
					  				</div>
					  				<div class="uploadimg">
					  					<!--<span>上传新照片</span>-->
					  					<a href="javascript:;" class="file">上传新照片  
									  		<input 
										    	type="file" 
										    	name="image" 
										    	accept="image/*"										       
										        @change="setImage" 
										    />
		    							</a>
					  				</div>
					  			</div>
					  		</el-col>
				  	   </el-row>
				  	</div>
				  	<div class="line"></div>
				  	<div class="addParent">
				  		<div class="parent" v-if="student.studentParentEntityList" v-for="item in student.studentParentEntityList">
				  			<div class="parentname">
				  				<span class="spanlabel">家长姓名：</span>
				  				<span class="spanlabelweight">{{item.parentName}}
				  					<span v-if="item.parentMode==1">(父亲)</span>
				  					<span v-else-if="item.parentMode==2">(母亲)</span>
				  					<span v-else-if="item.parentMode==3">(爷爷/外公)</span>
				  					<span v-else-if="item.parentMode==4">(奶奶/外婆)</span>
				  					<span v-else-if="item.parentMode==5">(其他)</span>
				  				</span>
				  				<!--<el-input disabled style="width:1rem;" ref="parentname"  v-model="item.parentName" placeholder="家长姓名"></el-input>-->
				  			</div>
				  			<!--<div class="relationship">
					  				<el-select v-model="item.parentMode" placeholder="请选择">
									    <el-option
									      disabled	
									      v-for="item in relationshipList"
									      :key="item.value"
									      :label="item.name"
									      :value="item.value">
									    </el-option>
								    </el-select>
				  			</div>-->
				  			<div class="linkphone">
				  				<span class="spanlabel">联系电话：</span>
				  				<span class="spanlabelweight">{{item.phone}}</span>
				  				<!--<el-input disabled style="width:1.5rem;" ref="linkphone" v-model="item.phone" placeholder="联系电话"></el-input>-->
				  			</div>
				  			<div class="parentwexin">
				  				<span class="spanlabel">家长微信：</span>
				  				<span class="spanlabelweight">{{item.wechat}}</span>
				  			<!--	<el-input disabled style="width:1.5rem;" v-model="item.wechat" placeholder="家长微信"></el-input>-->
				  			</div>
				  		    <!--<div class="operateBtn">
				  		    	<div class="add" @click="addParent"></div>
				  		    	<div class="reduce" @click="reduceParent(item)"></div>
				  		    </div>-->
				  		</div>			  		
				  	</div>
			    	<div class="RecipientAddress">
			    		<span class="spanlabel">收件地址：</span>			    		
			    		<div class="detailinfo" v-if="student.studentUserAddressEntity">
			    			<div class="item">
			    				<span class="spanlabelweight">{{student.studentUserAddressEntity.receiverName||""}}</span>&nbsp;
			    				<span class="spanlabel">{{student.studentUserAddressEntity.receiverPhone||""}}</span>
			    			</div>
			    			<div class="item">
			    				<span class="spanlabel">{{student.studentUserAddressEntity.province||""}}</span>&nbsp;
			    				<span class="spanlabel">{{student.studentUserAddressEntity.city||""}}</span>&nbsp;
			    				<span class="spanlabel">{{student.studentUserAddressEntity.area||""}}</span>&nbsp;
			    				<span class="spanlabel">{{student.studentUserAddressEntity.address||""}}</span>&nbsp;			    							    				
			    			</div>
			    			<!--<div class="item">
			    				<el-input v-model="namemodel"  style="width:2rem;" placeholder="请输入收件人名称"></el-input>
			    				<el-input v-model="phonemodel" style="width:2rem;" placeholder="请输入收件人号码"></el-input>
			    			</div>
			    			<div class="item">
			    				<el-select v-model="pmodel" @change="changeProvince" style="width:2rem;" placeholder="请选择">
								    <el-option
								      v-for="item in prinvice"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
  								</el-select>
  								<el-select v-model="dmodel" @change="changeCity" style="width:2rem;" placeholder="请选择">
								    <el-option
								      v-for="item in districtcity"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
  								</el-select>
  								<el-select v-model="cmodel" style="width:2rem;" placeholder="请选择">
								    <el-option
								      v-for="item in county"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
  								</el-select>
			    			</div>
			    			<div class="item">
			    				<el-input v-model="detailmodel" style="width:7.2rem;" placeholder="请输入详细地址"></el-input>
			    			</div>-->
			    		</div>
			    	</div>
			  	</div>
			  </div>
		      <!--<div slot="footer" class="footer-btn">
		      	 <el-button @click="btnCancel" class="btnCancel">取 消</el-button>
    			 <el-button @click="btnOk" class="btnOk">保 存</el-button>
		      </div>-->
		</el-dialog>
		<!--裁剪图片组件-->
		<imgplugins></imgplugins>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import imgplugins from '../../common/cutImage_plugin'
	let vm;
	export default {
		components: {
		  	imgplugins
		  },
		props:["student"],
		data(){
			return {	
				modalclose:false,//禁止点击面板外关闭面板
				filedata:null,//待上传的学员头像						
				relationshipList:[],								
				pmodel:'',
				dmodel:'',
				cmodel:'',
				namemodel:'',
				phonemodel:'',
				detailmodel:'',												
			}
		},
		methods:{
			
			initData(){
				
				//获取数据字典
                let dicdata = tool.getItem(lsKey.dict,true)
                this.relationshipList = dicdata["parent_mode"];//家长数据字典       
                console.log(this.relationshipList)
                                      
			},

			/**
			 * 关闭对话框
			 */
			handleClose(){
			  
				this.$store.dispatch('editorStuInfo/hideseditorPanel');
				this.$parent.searchData();
			},
			/**
			 * 获取图片
			 */
			setImage(e) { 
				
		        const file = e.target.files[0];		        
		        if (!file.type.includes('image/')) {
		          alert('Please select an image file');
		          return;
		        }				  
		          vm.filedata = new FormData(); //创建form对象
		          vm.filedata.append('file',file,file.name);//通过append向form对象添加数据		       
		          vm.filedata.append('content','studentIcon');//添加form表单中其他数据
		        //console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去		      		          
		         	       
		        if (typeof FileReader === 'function') {//生成本次url
		        	
		          const reader = new FileReader();
		        
		          reader.onload = (event) => {
		          	
		            this.student.photo = event.target.result;       
		            
		          };
		          reader.readAsDataURL(file);
		          		         
		        } else {
		          alert('Sorry, FileReader API not supported');
		        }
		        
		        if(vm.filedata!=null){
		        	api.uploadFile(vm.filedata).then(function(data){						
		          	   
		          	   	if(data.result="操作成功"){		          	   		
		          	   		vm.student.photo = data.url;
		          	   	}	
		          	   	
		          	   	let paras={
								   studentId:vm.student.studentId,
								   clueId:vm.student.clueId,
								   studentNo:vm.student.studentNo,
								   realName:vm.student.realName,
								   nickName:vm.student.nickName,
								   genderMode:vm.student.genderMode,
								   birthday:vm.student.birthday,
								   familyAddress:vm.student.familyAddress,
								   campusId:vm.student.campusId,
								   kindergarten:vm.student.kindergarten,
								   grade:vm.student.grade,
								   studentParentEntityList:vm.student.studentParentEntityList,
								   photo:vm.student.photo,
								   
				    		}
		          	   
		          	   	return api.studentUpdate(paras);
		       		 }).then(function(data){
		       		 	console.log(data)
		       		 })
		        }
		        
		        
		      },			
			/**
			 * 添加家长
			 */
			addParent(){				
				let parentinfo={
					createTime:"",
					createUserId:this.student.studentParentEntityList[0].createUserId,
					createUserName:this.student.studentParentEntityList[0].createUserName,
					isDelete:this.student.studentParentEntityList[0].isDelete,
					parentId: "",
					parentMode:"",
					parentName:"",
					phone:"",
					studentId:this.student.studentParentEntityList[0].studentId,
					updateTime:"",
					updateUserId:this.student.studentParentEntityList[0].updateUserId,
					wechat:"",
					uuid:tool.uuid()
				}
				this.student.studentParentEntityList.push(parentinfo);//添加新的家长信息
			},
			/**
			 * 删减家长
			 */
			reduceParent(item){
				
				let uuid=item.uuid;
				let studentlist=this.student.studentParentEntityList;
				if(uuid==null){//从数据库中获取家长					
					let pid= item.parentId;
					for(let i =0;i<studentlist.length;i++){
						
						if(studentlist[i].parentId==pid){
							if(studentlist.length<2){
								 this.$message({
						          message: '必须有一位学员家长',
						          type: 'warning'
						        });
						        return;
							}
							studentlist.splice(i, 1); 
						}
					}
					
				}else{//新增家长
					for(let i =0;i<studentlist.length;i++){
						
						if(studentlist[i].uuid==uuid){
							if(studentlist.length<2){
								 this.$message({
						          message: '必须有一位学员家长',
						          type: 'warning'
						        });
						        return;
							}
							studentlist.splice(i, 1); 
						}
					}
					
				}
				
			},
			
			/**
			 * 保存
			 */
			btnOk(){	
				
				
				//验证
				let phones=this.$refs.linkphone;//手机号码
				let parents=this.$refs.parentname;//家长名称
				let rules=[];
				
				//家长名称规则
				if(parents){
					
					for(let i =0;i<parents.length;i++){	
						if(parents[i].value!=""){
							 rules.push({
									judge : tool.judge("name",parents[i].value),
									focus : parents[i],
									tips : tips.name
							});
						}
			  		}
						
					
					
				}
				
				//手机号码规则
				if(phones){
					
					for(let i =0;i<phones.length;i++){
					    if(phones[i].value!=""){
					    	 rules.push({
								judge : tool.judge("phone",phones[i].value),
								focus : phones[i],
								tips : tips.phone
						    });
					    }
						
				  }
				
				}
				

	            if(!tool.validate(rules)) {
	            	
					return;
				}
	            
	           for(let i=0;i<this.student.studentParentEntityList.length;i++){//删除uuid字段值
	           	  if(this.student.studentParentEntityList[i].uuid)
	           	  delete this.student.studentParentEntityList[i].uuid;
	           }
	           
	           let isExist = false;
	            for(let i =0;i<this.student.studentParentEntityList.length;i++){
	            	let parent = this.student.studentParentEntityList[i];
	            	if(parent.phone == ""){
	            		isExist = true;	            		
	            	}
	            }          
				if(isExist){
					 	this.$message({
				          message: '家长号码不能为空',
				          type: 'warning'
				        });
				        return;
				}
				
				let paras={
					   studentId:this.student.studentId,
					   clueId:this.student.clueId,
					   studentNo:this.student.studentNo,
					   realName:this.student.realName,
					   nickName:this.student.nickName,
					   genderMode:this.student.genderMode,
					   birthday:this.student.birthday,
					   familyAddress:this.student.familyAddress,
					   campusId:this.student.campusId,
					   kindergarten:this.student.kindergarten,
					   grade:this.student.grade,
					   studentParentEntityList:this.student.studentParentEntityList
				    }
				
				if(vm.filedata==null){
					
					api.studentUpdate(paras).then(function(data){										
						 vm.$message({
				          message: '修改成功',
				          type: 'success'
				        });
				        vm.$parent.initData();
						vm.$store.dispatch('editorStuInfo/hideseditorPanel');
					})		
					
				}else{
					api.uploadFile(vm.filedata).then(function(data){						
		          	   
		          	   	if(data.result="操作成功"){		          	   		
		          	   		paras.photo = data.url;
		          	   	}		          	   	
		          	  return api.studentUpdate(paras);
		          	  
		          	}).then(function(data){
		          		vm.$message({
				          message: '修改成功',
				          type: 'success'
				        });
				        vm.$parent.initData();
						vm.$store.dispatch('editorStuInfo/hideseditorPanel');
						
		          	}).catch(function(err){
		          		
		          	})
				}
			},
			/**
			 * 取消
			 */
			btnCancel(){
				//this.initData();
				this.$store.dispatch('editorStuInfo/hideseditorPanel');
			},

		},	
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.editorStuInfo.editorDialog,
					  //prinvicelist:state=>state.commondata.chinaCitylist					
					}),
		 prinvicelist:{
		 	get(){
		 		return this.$store.state.commondata.chinaCitylist
		 	},
		 	set(val){
		 		this.$store.state.commondata.chinaCitylist = val;
		 	}
		 },
		 gradeList:function(){
		 	   //获取数据字典
				let dicdata = tool.getItem(lsKey.dict,true)
				let gradelist=dicdata["grade_mode"];//获取年级数据字典列表	
				    for(let i =0;i<gradelist.length;i++){
				    	gradelist[i].value = Number(gradelist[i].value);				    	
				    }								  				
				return gradelist;
		 },
		 Name:{
		 		 	
		 	get:function(){
		 		let name ='';
		 		for(let i=0;i<this.gradeList.length;i++){
			 		if(this.gradeList[i].value==this.student.grade){
			 			name = this.gradeList[i].name;
			 		}
		 		}
		 		
		 		return name;
		 	},
		 	set:function(val){
		 		
		 	}
		 }
		

       },
       mounted(){
       	vm=this;
       	vm.initData();
       }
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.editorStuContainer{		
		.studentInfobox{
			width:100%;
			max-height: 10rem;
			padding:0 .31rem;	
			.studentinfo{
				width:100%;
			    max-height: 3rem;			 
			    .inputbox{
			    	width:100%;
			    	height: .5rem;
			    	line-height: .5rem;
			    	font-size: .15rem;
			    	.el-radio{
			    		margin-right:5px;
			    	}
			    }
			    .stuheadimgbox{
			    	width:1.5rem;
			    	height: 2rem;			    	
			    	float: right;
			    	margin-right: 0px;
			    	.headimg{
			    		margin:.1rem;
			    		width:1.3rem;
			    		max-height:2rem;			    			    		
			    		img{
			    			width:100%;	
			    			max-height:2rem;			    			
			    		}
			    	}
			    	.uploadimg{
			    		width:100%;
			    		height: .3rem;			    	
			    		text-align: center;
			    		line-height: .3rem;
			    		margin-top:.1rem;
			    		.file {
							    position: relative;
							    display: inline-block;
							    background: #D0EEFF;
							    border: 1px solid #99D3F5;
							    border-radius: 4px;
							    padding: 4px 12px;
							    overflow: hidden;
							    color: #1E88C7;
							    text-decoration: none;
							    text-indent: 0;
							    line-height: 20px;
							}
							.file input {
							    position: absolute;
							    font-size: 100px;
							    right: 0;
							    top: 0;
							    opacity: 0;
							}
							.file:hover {
							    background: #AADFFD;
							    border-color: #78C3F3;
							    color: #004974;
							    text-decoration: none;
							}
			    	}
			    }
			}
			.line{
				height: 1px;
				width:100%;
				margin:.2rem 0 .2rem 0;
				background: $partinglineColor;
			}
			.addParent{
				max-height: 4rem;	
				width:100%;	
				overflow: auto;
				margin-bottom: .2rem;
				.parent{
					width: inherit;
					height: .6rem;
					line-height: .5rem;					
					.parentname{
						width:3rem;
						height: inherit;						
						float: left;
					}
					.relationship{
						width: 1rem;
						height: inherit;						
						float: left;
					}
					.linkphone{
						width: 3rem;
						height: inherit;
						margin-left: .1rem;						
						float: left;
					}
					.parentwexin{
						width: 3rem;
						height: inherit;						
						float: left;
					}
				    .operateBtn{
				    	width: 1rem;
						height: inherit;						
						float: left;
						padding:0.15rem;
				    	.add{
				    		float: left;
				    		width:.2rem;
				    		height:.2rem;
				    		background: url('~@/assets/img/education_manage/btn_add.png');
				    		background-size:0.2rem 0.2rem;
				    	}
				    	.reduce{
				    		float: left;
				    		margin-left: .2rem;
				    		width:.2rem;
				    		height:.2rem;
				    		background: url('~@/assets/img/education_manage/btn_reduce.png');
				    		background-size:0.2rem 0.2rem;
				    	}
				    }	
				}	

			}
			.RecipientAddress{				
				width:inherit;
				max-height: 1.5rem;				
				display: flex;
				padding-bottom: 0.3rem;
				.detailinfo{
					width:8.5rem;
					max-height: 1.5rem;		
					font-size:0.16rem;			
					.item{
						width: inherit;
						height: auto;						
					}
				}
			}
		}
				
		/**自定义对话框标题样式**/
		.panel_title{				
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #FFFFFF;
			width:10rem;
			border-radius: .1rem;
			margin-top:10vh;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
	}
</style>